<template>
  <div class="main">
    <div class="num" :style="{ left: per }">{{ percentage }}%</div>
    <div class="bar">
      <div :style="{ width: per }" class="inner" />
    </div>
    <div :style="{ left: per }" class="triangle" />
  </div>
</template>
<script>
export default {
  props: ['percentage'],
  data() {
    return {
    }
  },
  computed: {
    per() {
      return this.percentage + '%'
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
  .main{
    width: 100%;
    height: 50px;
    margin: 20px auto;
    position: relative;
    .num{
      position: absolute;
      left: 88%;
      width: 45px;
      margin-left: -30px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      transition: all .4s ease;
      color: #fff;
    }
    .bar{
      position: absolute;
      top: 65%;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      transform: translateY(-50%);
      background-color: #283052;
      .inner{
        transition: ease .4s all;
        border-radius: 5px;
        height: 10px;
        background: linear-gradient(
          to right,
          rgb(36, 203, 255) 30%,
          rgb(144, 0, 255) 100%
        );
      }
    }
    .triangle{
      transition: ease .4s all;
      position: absolute;
      top: 40px;
      margin-left: -10px;
      width: 0;
      height: 0;
    }
  }
</style>
